page{
	background:linear-gradient(to bottom,#ffffff,#ffffff,#f9f0e7) ;
	height: 100%; 
}
/*顶部*/

/*搜素框*/
#toSearch{
	width: 550rpx;
	height: 40rpx;
	margin: 50rpx auto;
	border-radius: 10rpx;
	border: 1rpx solid #afafaf;
	padding: 10rpx 25rpx;
}
input{
	text-align: left;
	font-size: 20rpx;
	letter-spacing: 3rpx;
	float: left;
}

#search_img{
	width: 40rpx;
	height: 40rpx;
	float: right;
}

.gradient {
		width: auto;
		padding: 30rpx;
		height: 180rpx;
		background-color: #FFFFFF;
		text-align: center;
		box-shadow: 0 5rpx 100rpx #dedede;
		color: #888888;
		

	}
#top_text{
	color: #888888;
	font-size: 33rpx;
	letter-spacing: 5;
}	
	
	/*日历*/
	#time{
		width: 400rpx;
		height: 180rpx;
		margin: 80rpx auto;
		border-radius: 20rpx;
		
	}
	#t_date{
		width: 250rpx;
		height: 100rpx;
		font-size: 60rpx;
		font-weight: 800;
		color: #fff;
		margin: 20rpx 20rpx;	
	}
	#date_yy{
		font-size: 30rpx;
		color: #888;
		margin-top: 20rpx;
		letter-spacing: 10rpx;
	}
	.gradient text{
		font-size: 30rpx;
		letter-spacing: 10rpx;
		font-weight: 800;
		
	}
	
	#weather{
		margin-top: 100rpx;
		margin-right: 100rpx;
		background-color: rgba(255,255,255,0.7);
		color: #86ABD5;
		padding: 20rpx;
		font-weight: 600;
		letter-spacing: 5;
	}
	
	#sentence{
		color: #fff;
		font-size: 30rpx;
		margin-top: 20rpx;
		margin-right: 40rpx;
		padding: 20rpx;
	}
	



	.image-bg {
		width: 100%;
		height: 100%;
	}
	
/*选择*/
	.nav {
		
		padding: 15px 0;
		float: left;
	}
	
	.nav_box{
		width: 250rpx;
		height: 300rpx;	
		margin: 60rpx 25rpx 60rpx 70rpx;
		border-radius: 20rpx;
		box-shadow: 0 5rpx 20rpx #dddddd;
		/*background-color: #fff; */
		background: linear-gradient(45deg,#86abd5,#eac1be);
		opacity: 0.8;
		
	}
	.idea{
		background: linear-gradient(135deg,#86abd5,#eac1be);
	}
	.timeline{
		background: linear-gradient(90deg,#86abd5,#eac1be);
	}
	.idea image{
		width: 100rpx;
		height: 100rpx;
		padding: 40rpx;
		opacity: 0;
	}
	.idea view{
		border-left:5rpx solid #fff ;
		color: #ffffff;
		padding:0rpx 20rpx;
		margin-left:30rpx;
		letter-spacing: 2rpx;
	}
	.timeline image{
		width: 70rpx;
		height: 70rpx;
		padding: 55rpx;
		opacity: 0;
	}
	.timeline view{
		border-left:5rpx solid #fff ;
		color: #ffffff;
		padding:0rpx 20rpx;
		margin-left:30rpx;
		letter-spacing: 5rpx;
	}


	.nav_item view {
		width: 120rpx;
		height: 120rpx;
		background: #0077AA;
		border-radius: 60rpx;
		margin: 10px auto 10px auto;
		line-height: 120rpx;
		text-align: center;
		font-size: 50rpx;
		color: #fff;
	}

	.nav_item text {
		color: #0086B3;
		font-size: 30rpx;
		text-align: center;
	}

    .nav_2{
		width: 300rpx;
		height: 660rpx;
		background: linear-gradient(300deg,#86abd5,#eac1be);
		opacity: 0.8;
		border-radius: 20rpx;
		float: right;
		margin: 90rpx 70rpx 100rpx 25rpx;
		
	}

	/* 音乐组件 */
	@-webkit-keyframes musicRotate {
		from {
			-webkit-transformb: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(360deg)
		}
	}


	@-webkit-keyframes musicStop {
		from {
			-webkit-transform: rotate(20deg)
		}

		to {
			-webkit-transform: rotate(0deg)
		}

	}

	@-webkit-keyframes musicStart {
		from {
			-webkit-transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(20deg)
		}
	}

	.bg_music {
		position: fixed;
		right: 30rpx;
		bottom: 180rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.musicImg {
		width: 60rpx;
		height: 60rpx;
	}

	.music_icon {
		animation: musicRotate 3s linear infinite;
	}

	.music_play {
		width: 28rpx;
		height: 60rpx;
		margin-left: -10rpx;
		transform-origin: top;
		-webkit-transform: rotate(20deg);
	}

	.playImg {
		animation: musicStop 1s linear forwards;
	}

	.pauseImg {
		animation: musicStart 1s linear forwards;
	}

	#myAudio {
		display: none;
	}